<template>
  <div class="three">
    <div class="three-one" v-for="item in tableData" :key="item.id">
      <h2>{{item.month}}</h2>
      <div
        class="three-one-one"
        v-for="item in item.articles"
        :key="item.id"
        @click="goToDetail(item.id)" style="cursor: pointer;"
      >
        <img :src="item.titleImage" alt="" />
        <div class="one-one-two">
          <p>{{ item.title }}</p>
          <span>
            {{ item.createTime }}
          </span>
        </div>
      </div>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="this.total"
      :current-page="current"
      @current-change="handleCurrentChange"
      class="fen"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      current: 1, //当前页数
      total: 0, //总条数
    };
  },
  created() {
    this.getList();
  },
  methods: {
      goToDetail(id) {
    this.$router.push(`/detail?id=${id}`);
  },
    getList() {
      this.$axios
        .post(`/api/api/archive/list`, {
          current: this.current,
          size: 10,
        })
        .then((res) => {
          this.tableData = res.data.data;
          console.log(this.tableData, "1111");
          console.log(res);
          this.total = res.data.total;
          console.log(this.current);
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleCurrentChange(val) {
      this.current = val; // 更新当前页码
      this.getList(); // 重新获取对应页的数据
    },
  },
};
</script>

<style scoped>
.three {
  background-color: #f4f4f4;
  padding: 20px 0;
}
.three-one {
  display: flex;
  flex-wrap: wrap;
  width: 859px;
  background-color: white;
  margin: 0px auto;
  padding: 0 20px;
  margin-top: 20px;
}
.three-one-one img {
  width: 96px;
  height: 48px;
}
.three-one-one {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 832px;
  height: 50px;
  border-bottom: 1px solid #000;
  padding: 10px;
}
.one-one-two {
  height: 48px;
}
.one-one-two p {
  margin: 0;
}
.fen {
  margin-top: 20px;
  text-align: center;
}
</style>